// 获取 wangEditor 构造函数和 jquery
import {getOssSign} from '../apis'
var E = window.wangEditor
// console.log(E)
var $ = window.jQuery
// 用 createMenu 方法创建菜单
E.createMenu(function (check) {
  // 定义菜单id，不要和其他菜单id重复。编辑器自带的所有菜单id，可通过『参数配置-自定义菜单』一节查看
  var menuId = 'image'

  // check将检查菜单配置（『参数配置-自定义菜单』一节描述）中是否该菜单id，如果没有，则忽略下面的代码。
  if (!check(menuId)) {
    return
  }

  // this 指向 editor 对象自身
  var editor = this

  // 创建 menu 对象
  var menu = new E.Menu({
    editor: editor, // 编辑器对象
    id: menuId, // 菜单id
    title: '上传图片', // 菜单标题

    // 正常状态和选中状态下的dom对象，样式需要自定义
    $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-picture"></i></a>'),
    $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-picture"></i></a>')
  })

  // 菜单正常状态下，点击将触发该事件
  menu.clickEvent = function (e) {
    var input = document.createElement('input')
    input.type = 'file'
    input.click()
    input.onchange = (e) => {
      let file = input.files[0]
      getOssSign().then(({data: data}) => {
        let {accessid, host, policy, signature, startswith} = data.result.ossConfig
      // 随机文件名
        function genFileName () {
          var x = '0123456789qwertyuioplkjhgfdsazxcvbnm'
          var tmp = ''
          var timestamp = new Date().getTime()
          for (var i = 0; i < 4; i++) {
            tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length)
          }
          return timestamp + tmp
        }
        let fd = new FormData()
        // 保存于oss的文件名
        let saveName = genFileName() + '.' + file.name.split('.')[1]
        console.log(saveName)
        //
        fd.append('OSSAccessKeyId', accessid)
        fd.append('policy', policy)
        fd.append('signature', signature)
        fd.append('key', startswith + saveName)
        fd.append('success_action_status', 200)
        fd.append('file', file, saveName)
        //
        let xhr = new XMLHttpRequest()
        xhr.open('post', host, true)
        // 监听进度
        // xhr.upload.addEventListener('progress', (evt) => {
        //   this.progress = Math.round((evt.loaded) * 100 / evt.total)
        // }, false)
        // 上传结果
        xhr.addEventListener('load', (e) => {
          // 失败
          if (e.target.status !== 200) {
            console.log(e)
            console.log('上传失败')
            return
          }
          // 成功
          if (e.target.status === 200) {
            let imageUrl = host + '/' + startswith + saveName
            let imgHtml = '<img style="max-width:100%;" src="' + imageUrl + '"/>'
            editor.command(e, 'insertHtml', imgHtml, callback)
          }
        }, false)
        xhr.send(fd)
      })
    }
    function callback () {
    }
  }
  // menu.clickEvent = function (e) {
  //   // 找到当前选区所在的 p 元素
  //   var elem = editor.getRangeElem()
  //   var p = editor.getSelfOrParentByName(elem, 'p')
  //   var $p
  //
  //   if (!p) {
  //     // 未找到 p 元素，则忽略
  //     return e.preventDefault()
  //   }
  //   $p = $(p)
  //
  //   // 使用自定义命令
  //   function commandFn () {
  //     $p.css('text-indent', '2em')
  //   }
  //   editor.customCommand(e, commandFn)
  // }

  // 菜单选中状态下，点击将触发该事件
  // menu.clickEventSelected = function (e) {
  //   // 找到当前选区所在的 p 元素
  //   var elem = editor.getRangeElem()
  //   var p = editor.getSelfOrParentByName(elem, 'p')
  //   var $p
  //
  //   if (!p) {
  //     // 未找到 p 元素，则忽略
  //     return e.preventDefault()
  //   }
  //   $p = $(p)

    // 使用自定义命令
  //   function commandFn () {
  //     $p.css('text-indent', '0')
  //   }
  //   editor.customCommand(e, commandFn)
  // }

  // 根据当前选区，自定义更新菜单的选中状态或者正常状态
  // menu.updateSelectedEvent = function () {
  //   // 获取当前选区所在的父元素
  //   var elem = editor.getRangeElem()
  //   var p = editor.getSelfOrParentByName(elem, 'p')
  //   var $p
  //   var indent
  //
  //   if (!p) {
  //     // 未找到 p 元素，则标记为未处于选中状态
  //     return false
  //   }
  //   $p = $(p)
  //   indent = $p.css('text-indent')
  //
  //   if (!indent || indent === '0px') {
  //     // 得到的p，text-indent 属性是 0，则标记为未处于选中状态
  //     return false
  //   }
  //
  //   // 找到 p 元素，并且 text-indent 不是 0，则标记为选中状态
  //   return true
  // }

  // 增加到editor对象中
  editor.menus[menuId] = menu
})
